<!-- 此页面为老师代码自带，无需理会 -->
<template>
	<view class="main-page">
		<view class="tab-content">
			<homeVue v-if="activeTab === 0" />
			<cardVue v-if="activeTab === 1" />
			<topVue v-if="activeTab === 2" />
			<myVue v-if="activeTab === 3" />
		</view>
		<up-tabbar :value="activeTab" @change="onTabChange" fixed safe-area-inset-bottom>
			<up-tabbar-item text="首页" icon="calendar" />
			<up-tabbar-item text="打卡" icon="calendar" />
			<up-tabbar-item text="排行榜" icon="account" />
			<up-tabbar-item text="我的" icon="account" />
		</up-tabbar>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import homeVue from '../home/home.vue'
	import cardVue from '../card/card.vue'
	import topVue from '../top/top.vue'
	import myVue from '../my/my.vue'

	const activeTab = ref(0)
	const onTabChange = (index : number) => {
		activeTab.value = index
	}
</script>

<style scoped lang="scss">
	.main-page {
		min-height: 100vh;
		background: #f5f6fa;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.tab-content {
		flex: 1;
		padding-bottom: 120rpx;
	}

	.tab-inner {
		padding: 40rpx 28rpx 0 28rpx;
	}
</style>